<template>
  <div>
     <x-header style="position:fixed;top:0px;width:100%;z-index:1000;" >管理收货地址</x-header>
    <div style="margin-top:46px">
           <div class="address_" v-for="(item,index) in addressLists" :key="index" :value="index">
        <div class="title_">
        <div class="title_top">
          <div class="checkIcon">
              <!-- <check-icon :value.sync="demo1" ></check-icon>   -->
              <!-- <checklist :max="1" title="" :label-position="labelPosition" required :options="commonList" v-model="index" @on-change="change"></checklist> -->
              <input name="111" @click="change(item)" v-model="values" :value="item" type="radio"/>
              <!-- <p>已选：{{values}}</p> -->
          </div>
          <div class="addreInfos">
            <p>{{item.username}}</p>
            <p>{{item.address}}</p>
          </div>
          <div class="addreTel">
            {{item.tel}}
          </div>
            <!-- <p>
                <span>{{item.username}}</span>
                <span style="float:right">{{item.tel}}</span>
            </p>
            <p>{{item.address}}</p> -->
        </div>
        <div class="setAddress">
            <div class="moAddress">
                           
            </div>
            <!-- <div class="edit"><img src="static/cart/bj@2x.png" alt="">编辑</div> -->
            <div class="detele" @click="deleaddress"><img src="static/cart/Trash@2x.png" alt="">删除</div>
        </div>
    </div>
     <!-- <div v-transfer-dom>
 <alert v-model="show" :title="温馨提示" @click.native="showModule(item.addid)" @on-show="onShow" @on-hide="onHide">确定要删除吗 </alert>
    </div> -->
    <!-- 删除提示 -->
          <div v-transfer-dom>
          <confirm v-model="show1"
          :title="delTile"
          @on-cancel="onCancel"
          @on-confirm="onConfirm(item.addid)"
          @on-show="onShow"
          @on-hide="onHide">
            <p style="text-align:center;">{{deleMessage }}</p>
          </confirm>
        </div>
    </div>
    </div>
    
    <div class="save" @click="go_newAddress">
        新建地址
    </div>
  </div>
</template>

<script>
import {
  Swiper,
  CheckIcon,
  XHeader,
  SwiperItem,
  Grid,
  GridItem,
  GroupTitle,
  AlertModule,
  Checklist,
  Alert,
      Confirm,
  TransferDomDirective as TransferDom
} from "vux";
import { homeUrl } from "../../components/utils/utils.js";
import axios from "axios";
import qs from "qs";
// Vue.use(AlertPlugin)

// 或者umd方式
// 引入构建的js文件
// Vue.use(vuxAlertPlugin)
export default {
  directives: {
    TransferDom
  },
  components: {
    Swiper,
    SwiperItem,
    Grid,
    GridItem,
    GroupTitle,
    XHeader,
    CheckIcon,
    Alert,
    Checklist,
        Confirm,
  },
  data() {
    return {
      demo1: false,
      addressLists: "",
      show1: false,
      checklist001:"jjj",
      commonList: [ '郑州'],
      labelPosition:"",
      values:"",
       deleMessage: "你确定要删除吗?",
      delTile: "温馨提示",
    };
  },
  methods: {
    change(item){
        console.log(item)
    },
    go_newAddress() {
      this.$router.push({ name: "add_address", params: {} });
    },
    addressList() {
      var datas = qs.stringify({
        wxid: "oCBm3vxlqwJjUbBDshKiQ50IFSjs"
      });
      axios.post(homeUrl() + "findAddress/", datas, { emulateJSON: true }).then(
        result => {
          console.log(result);
          if (result.status == 200) {
            console.log(result.data);
            this.addressLists = result.data;
          }
        },
        error => {
          this.$vux.toast.text("网络请求失败....", "bottom");
          console.log(error);
        }
      );
    },
    change (val) {
      console.log( JSON.stringify(val));
         localStorage.setItem("value", JSON.stringify(val))
      
      // this.$router.go(-1)
      this.$router.push({ name: "order_confirm", params: {addressInfo:val} });
        // wiondow.localStorage.setItem("value", val)
      
    },
    // 删除地址
    deleaddress(addtrssId) {
      this.show1 = true;

      
    },
    onHide() {
      console.log("on hide");
    },
    onShow() {
      console.log("on show");
    },
    showPlugin() {
      console.log(",,,,");
      this.$vux.alert.show({
        title: "提示",
        content: "删除吗",
        onShow() {
          console.log("Plugin: I'm showing");
        },
        onHide() {
          console.log("Plugin: I'm hiding now");
        }
      });
    },
  // 确定删除
  onConfirm(addtrssId){
       var datas = qs.stringify({
        addid: addtrssId
      });
      axios.post(homeUrl() + "delAddress/", datas, { emulateJSON: true }).then(
        result => {
          console.log(result);
          if (result.status == 200) {
              console.log(result.data)
          //  this.addressLists=result.data
          this.addressList()
          }
        },
        error => {
          this.$vux.toast.text("网络请求失败....", "bottom");
          console.log(error);
        })


  },
   onHide() {
      console.log("on hide");
    },
    onShow() {
      console.log("on show");
    },
  onCancel() {
      console.log("on cancel");
    },
  },
  created() {
    console.log("..................");
    this.addressList();
  },
  beforeRouteLeave(to, from, next) {

    console.log("我是·地址")
    // 设置下一个路由的 meta
    to.meta.keepAlive = true; // 让 A 缓存，即不刷新
    next();
  }
};
</script>
<style>
.address_ {
  margin-top: 0.625rem;
}
.title_ {
  width: 100%;
  /* height: 6.3125rem; */
  background: #ffffff;
  font-size: 0.8125rem;
  margin-bottom: 10px;
}
.title_top {
  display: flex;
  /* height: 3.75rem; */
  border-bottom: 1px solid #ebebeb;
  padding: 0.625rem;
  /* padding-right: 0.625rem; */
  line-height: 25px;
  
}
.checkIcon{
  width: 50px;
  line-height: 3.125rem
}
.addreInfos{
  flex: 1
}
.setAddress {
  height: 2.5rem;
  line-height: 2.5rem;
  display: flex;
}
.moAddress {
  flex: 1;
}
.edit {
  width: 5rem;
}
.detele {
  width: 5rem;
}
.setAddress img {
  width: 1.25rem;
  height: 1.25rem;
  vertical-align: middle;
  margin-right: 8px;
}
.save {
  width: 100%;
  height: 45px;
  position: fixed;
  background: #e60012;
  text-align: center;
  line-height: 45px;
  color: #ffffff;
  bottom: 0;
}
</style>
